<template>
    <div className="user_box">
        <Card>
            <p slot="title">视频管理</p>
            <div slot="extra">
                <Button type="primary" size="small" @click="showAddModel()">添加视频</Button>
            </div>
            <Table :data="list" :columns="columns" />
            <Page :current="page" :style="pageStyle" @on-change="changePage" :page-size="10" :total="total"></Page>
        </Card>
        <Modal
            class-name="show_view_modal"
            :closable="true"
            :title="title"
            v-model="showModal"  
            @on-ok="addVideo"
            :mask-closable="false">
            <Form :model="currentData">
                <FormItem label="视频名称">
                    <Input v-model="currentData.name" placeholder="请输入视频名称" style="width: 300px" />
                </FormItem>
                <FormItem label="视频简介">
                    <Input v-model="currentData.introduction" placeholder="请输入视频简介" style="width: 300px" />
                </FormItem>
                <FormItem label="视频封面">
                    <Upload
                    multiple
                    type="drag"
                    :on-success="handleSuccessImage"
                    action="/fileupload?cdn=qiniu">
                        <div style="padding: 20px 0">
                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                            <p>点击上传视频封面</p>
                        </div>
                    </Upload>
                </FormItem>
                <FormItem label="上传视频">
                    <Upload
                    multiple
                    type="drag"
                    :on-success="handleSuccessVideo"
                    action="/fileupload?cdn=qiniu">
                        <div style="padding: 20px 0">
                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                            <p>点击上传视频</p>
                        </div>
                    </Upload>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>

export default {
  name: 'view_manage',
  data () {
    return {
        currentData:{
            id: "",
            name: "",
            introduction: "",
            cover: "",
            video: ""
        },
        showImage: false,
        showModal:false,
        title: "添加视频",
        total: 0,
        page: 1,
        list: [],
        currentImage: "",
        columns: [{
            title: '视频名称',
            width: 150,
            align: 'center',
            render: (h, params) => {
                return h('div', params.row.name)
            }
        },{
            title: '视频简介',
            width: 200,
            align: 'center',
            render: (h, params) => {
                return h('div', params.row.introduction);
            }
        },{
            title: '视频封面',
            width: 300,
            align: 'center',
            render: (h, params) => {
                return h('img', {
                    domProps: {
                        src: params.row.cover
                    },
                    style: {
                        width: "80px"
                    },
                });
            }
        },{
            title: '视频链接',
            width: 400,
            height: 200,
            align: 'center',
            render: (h, params) => {
                return h('video', {
                    domProps: {
                        src: params.row.video,
                        "controls":"controls"
                    },
                    style: {
                        height:"150px",
                        width: "280px"
                    },
                });
            }
        },{
            title: '操作',
            key: 'view',
            width: 130,
            fixed: 'right',
            align: 'center',
            render: (h, params) =>{
                let bar = [];
                bar.push(h('Button',{
                    props: {
                        type: 'error',
                        size: 'small'
                    },
                    on: {
                        click: () => {
                            this.jsonrpc.blind.admin.update({
                                id: params.row.id,
                                is_removed: !params.row.is_removed
                            }).then((res)=> {
                                this.changePage(this.page);
                            })
                        }
                    }
                }, "删除"));
                return h('div', bar);
            }
        }],
        pageStyle: {
            marginTop: '15px'
        }
    }
  },
  methods: {
    handleSuccessImage(res, file) {
        console.log(res)
        this.currentData.cover = res.fileURLArr[0]
    },
    handleSuccessVideo(res, file) {
        this.currentData.video = res.fileURLArr[0]
    },
    changePage(page) {
      this.jsonrpc.blind.admin.getVideos({ start: (page - 1) * 10, limit: 10 }).then(res=> {
            this.list = res.list;
            this.total = res.total;
            this.page = page;
      })
    },
    showAddModel() {
        this.currentData = {}
        // this.jsonrpc.blind.admin.addVideo()
        this.showModal = true
    },
    addVideo() {
        if(!this.currentData.video) {
            this.$Message.error("视频上传未成功")
        }
        this.jsonrpc.blind.admin.addVideo(this.currentData).then(()=>{
            this.changePage(this.page)
        })
    }
  },
  mounted() {
    this.changePage(1)
  }
}
</script>
